<template>
  <svg :width="width" :height="height">
    <rect :x="x" :y="y" :width="rectWidth" :height="rectHeight" :fill="fill"/>
  </svg>
</template>

<script>
import {createRenderer} from 'vue'

const myRenderer = createRenderer({
  createText(text) {
    return document.createTextNode(text)
  },
  createElement(tag, props, children) {
    const el = document.createElementNS('http://www.w3.org/2000/svg', tag)
    for (const key in props) {
      el.setAttribute(key, props[key])
    }
    if (children) {
      children.forEach(child => el.appendChild(child))
    }
    return el
  }
})

export default {
  data() {
    return {
      x: 10,
      y: 10,
      rectWidth: 100,
      rectHeight: 50,
      fill: 'red',
      width: 300,
      height: 200
    }
  },
  mounted() {
    const svg = myRenderer.createApp(this).mount(document.createElement('div'))
    document.body.appendChild(svg.$el)
  }
}
</script>